< h1 > ~ < h6 >
定義標題,從字體大小跟重要程度來說,< h1 > 是最大的標題,< h6 > 則是最小的標題,而通常一個網頁或文章中只會有一個最主要的標題,所以 < h1 > 最好不要使用太多次,這樣搜尋引擎才能清楚知道這個網頁的重點是什麼
<h1>h1標題</h1>
<h2>h2標題</h2>
<h3>h3標題</h3>
<h4>h4標題</h4>
<h5>h5標題</h5>
<h6>h6標題</h6>
< p >
定義段落,是大部分文字段落使用的標籤
<p>這是一段文字</p>
< em >
定義斜體,標籤內的文字會被改為斜體,除了文字本身會變體,還有在語意上強調重要性的用意,有提升 SEO 表現的功能
<em>我是斜體</em>
➡️ 我是斜體
< strong >
定義粗體,標籤內的文字會被改為粗體,除了文字本身會變粗體,還有在語意上強調重要性的用意,有提升 SEO 表現的功能
<em>我是粗體</em>
➡️ 我是粗體
< a href = ”URL” >
定義超連結,超連結可以指向其他網頁或在網頁內部跳轉。其中,必須使用 href 屬性指定跳轉目標的 URL。還有一個 target 屬性,若將其值設為 "_blank",則超連結被點擊時會在新分頁中顯示,而不是像預設行為一樣在同一頁面跳轉
<a href="https://www.youtube.com/">跳轉至YouTube</a>
< img src = “檔案來源” alt = “圖片替代文字” >
< img > 標籤是用來定義圖片的,跟其他標籤不同的是,它只需要單獨一個 < img >,不需要結束標籤,這種標籤稱之為空元素。其中,src 屬性的值是圖片的檔案來源,這個檔案來源必須要包含副檔名,例如 fileName.jpg。而 alt 屬性的值是一段文字,用來描述圖片的內容,當圖片無法正確顯示時,替代文字會顯示在圖片的位置,一個好的替代文字甚至有助於提升圖片的 SEO 排名
<img src="chubbyCat.jpg" alt="小胖貓">
< ul >
定義無序清單,清單內的項目需要包裹在 < li > 標籤之中
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
➡️ Result
- one
- two
- three
< ol >
定義有序清單,清單內的項目需要包裹在 < li > 標籤之中
<ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
➡️ Result
- one
- two
- three
< br >
< br > 在 HTML 中也是一個空元素標籤,這個標籤的作用就像是一個"換行符號",可以讓文本顯示在多行而不是一行。在 HTML 裡面,多個空格或直接按 Enter 換行會被當做一個空格處理,但是有時候我們需要在文本中明確的換行,這時就可以使用 < br > 標籤
<p>這是第一行<br>這是第二行</p>
➡️ Result
這是第一行
這是第二行
< hr >
< hr > 在HTML中是一條水平線,用來裝飾及劃分內容區塊
<p>第一段</p>
<hr>
<p>第二段</p>
➡️ Result
第一段
第二段
< div >
< div > 標籤是用來將 HTML 分割成不同區塊的容器標籤,它內部可以包含其他的 HTML 元素,例如文字、圖片、表格等等。一般來說 < div > 標籤會和 CSS 一起使用,來設定網頁的佈局和樣式。比如說,你可以把一些相關的 HTML 元素放在一個 < div > 標籤中,然後使用 CSS 來控制這個 < div > 標籤,進而控制這些 HTML 元素的佈局和樣式
<div>
<h1>標題</h1>
<p>內文</p>
<img src="fileName.jpg" alt="圖片">
</div>
< span >
< span > 是 HTML 中的一個行內元素標籤,它用於將一部分文本或其他內容標記為一個群組,以便對其應用樣式或其他屬性。與 < div > 標籤類似,< span > 標籤不會將文檔劃分為區塊,它只是在文本或其他內容中劃定一個區域。因此,< span > 標籤通常用於對文本或其他內容進行精細的樣式調整,或者用於將一部分內容與其他內容區分開來
<p>這是一段包含<span>重要信息</span>的文字</p>
< table >
< table > 標籤用來製作表格,需要搭配 < tr >,< td >,< th > 標籤一起使用
< tr > 定義表格的一整列,內部容納 < td > 或 < th >
< td > 定義表格的每一個儲存格
< th > 用法和 < td > 相同,只不過它的用途是呈現欄或列的標題
<table>
<tr>
<th></th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<th>No.1</th>
<td>Linus</td>
<td>24</td>
</tr>
<tr>
<th>No.2</th>
<td>Susie</td>
<td>23</td>
</tr>
</table>
➡️ Result
Name | Age | |
---|---|---|
No.1 | Linus | 24 |
No.2 | Susie | 23 |